<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>函数增强-默认参数顺序注意</title>
  <!-- 
  在 JavaScript 中，函数可以通过设置默认参数来增强其功能。默认参数允许你为函数的参数指定默认值，这样在调用函数时如果没有传入相应的参数，就会使用这些默认值。
  1. 默认参数的位置
  默认参数应该放在参数列表的末尾。如果将默认参数放在非默认参数之前，调用函数时可能会导致意想不到的结果。
  function example(a, b = 2) {
      console.log(a, b);
  }

  example(1);  // 输出: 1 2
  example(1, 3);  // 输出: 1 3
  如果将默认参数放在前面：
  function example(b = 2, a) {
      console.log(a, b);
  }

  example(1);  // 输出: undefined 1
  example(1, 3);  // 输出: 3 1
  在这个例子中， example(1)  的调用会将  1  赋值给  b ，而  a  由于没有提供值，所以是  undefined 。

  2. 默认参数的计算
  默认参数可以是任何表达式，包括调用其他函数或进行计算。
  function add(a, b = a) {
      return a + b;
  }

  console.log(add(5)); // 输出: 10
  console.log(add(5, 3)); // 输出: 8
  在这个例子中， b  的默认值依赖于  a  的值。

  3. 注意作用域
  默认参数在函数调用时被评估，因此它们可以访问函数体内的变量。
  let x = 10;

  function example(a, b = x) {
      console.log(a, b);
  }

  example(1);  // 输出: 1 10
  4. 与解构赋值结合使用
  在使用对象或数组的解构赋值时，可以为解构的属性设置默认值。
  function example({ a, b = 2 }) {
      console.log(a, b);
  }

  example({ a: 1 });  // 输出: 1 2
  总结
  - 默认参数应放在参数列表的末尾。
  - 默认参数可以是任意表达式，并可以访问函数内部的变量。
  - 与解构赋值结合使用时，可以为解构的属性设置默认值。
  -->
</head>
<body>

  <script>
    // 1.注意一: 有默认参数的形参尽量写到后面
    // 2.有默认参数的形参, 是不会计算在length之内(并且后面所有的参数都不会计算在length之内)
    // 3.剩余参数也是放到后面(默认参数放到剩余参数的前面)
    function foo(age, name = "foo", ...args) {
      console.log(name, age, args)
    }

    foo(18, "bar", "hello", "world")
    console.log(foo.length)

  </script>
  
</body>
</html>